<template>
 <div class="roleDeploy">
		<el-tree
			:data="authTree"
			show-checkbox
			node-key="modelId"
			:props="treeProps"
			:check-strictly="true"
			@check-change="handleCheckChange"
			@check="nodeCheck"
			:default-checked-keys="checkedKeys"
			ref="tree"
		>
		</el-tree>
		<p class="btn">
		<el-button type="warning" @click="configurationAuthority">配置权限</el-button>
		</p>
		<!-- <div slot="footer" class="dialog-footer">
			<el-button @click="dialogAuthorityFormVisible = false">取 消</el-button>
			<el-button :loading="authButtonLoading" type="primary" @click="handleUpdateAuth">确 定</el-button>
		</div> -->
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs';

  export default {
  	name:'roleDeploy',
  	props:['id'],
    data() {
      return {
      	authTree:[],
      	checkedKeys:[],
      	treeProps:{
				label: 'model',
				children: 'modelList'
			},
		authLists:[],
       }
    },
    created(){
    	// this.getModelByRoleId();
    	// this.getAuthList();
    },
    methods:{
    	getAuthList(){
    		var userId = sessionStorage.getItem("userId");
    		var token = sessionStorage.getItem("token");
    		axios({
    			method:'post',
    			url:'/sysModel/queryAllModel',
    			data:qs.stringify({token:token, userId:userId})
    		}).then((res) => {
    			this.authTree = res.data.data;
    		})
    	},
   //  	getAuthList(){
			// let params = {};
			// var userId = sessionStorage.getItem("userId");
			// var token = sessionStorage.getItem("token"),
			// axios({
			// 	method:'post',
			// 	url:'/api/sysModel/queryAllModel',
			// 	data:qs.stringify({token:token, userId: userId})
			// }).then(res =>{
			// 	console.log(res)
			// var authList = res.data.data.model;

			// //	递归函数获取模块信息
			// function sub(parent, authList){
			// 	var children = [];
			// 	authList.forEach((item) => {
			// 		if(item.parModelId == parent.modelId){
			// 			children.push(item);
			// 			//	递归子集
			// 			sub(item, authList);
			// 		}
			// 	})
			// 	parent.children = children;
			// }
			// //	根节点
			// var root = [];
			// authList.forEach((item) => {
			// 	if(item.parModelId == null){
			// 		root.push(item);
			// 	}
			// })
			// sub(root, authList);
			// this.authTree = root;
			// })
		// },

       	//选中节点触发事件
		handleCheckChange(data, checked, indeterminate){
			// console.log(data)
			// var node = this.$refs.tree.getNode(data.modelId)
			// console.log(node)
		},
		nodeCheck(data, checkedDatas) {
	      var _self = this;
 			
	      //  获取node节点
	      var checkedNode = _self.$refs.tree.getNode(data.modelId);
	      //  checkedNode.checked  当前节点是否被选中
	      _self.$refs.tree.setChecked(data.modelId, checkedNode.checked, false);

	      //  设置子节点
	      function setChildren(data) {
	        //  如果有下级
	        // console.log(data)
	        if (data.modelList) {
	          data.modelList.forEach((child) => {
	            //  勾选或者取消勾选
	            _self.$refs.tree.setChecked(child.modelId, checkedNode.checked, false);
	            //  递归
	            setChildren(child);
	          })
	        }
	      }
	      setChildren(data);

	      //  设置父节点
	      function setParent(node) {
	        //  如果是勾选，并且有上级，选择上级
	        if (checkedNode.checked && node.parent) {
	          _self.$refs.tree.setChecked(node.parent.data, true, false);
	          setParent(node.parent);
	        }
	        //  如果是取消勾选，并且有上级，并且节点类型是menu，并且同级已经全部取消勾选，取消选择上级勾选
	        if (!node.checked && node.parent) {
	          //  同级节点是否还有勾选的
	          var checked = node.parent.childNodes.some((childNode) => { return childNode.checked == true })
	          if (checked == false) {
	            _self.$refs.tree.setChecked(node.parent.data, false, false);
	            setParent(node.parent);
	          }
	        }
	      }
	      setParent(checkedNode);
	    },
		configurationAuthority(){
			var userId = sessionStorage.getItem("userId");
    		var token = sessionStorage.getItem("token");
   			let tree = this.$refs.tree;
   			this.authLists = tree.getCheckedNodes().concat(tree.getHalfCheckedNodes())
   			axios({
   				method:'post',
   				url:'/sysRole/addRoleAuth?userId='+userId+'&token='+token+'&roleId='+this.id,
   				data:this.authLists
   			}).then((res) => {
   				this.$message(res.data.data)
   				this.$emit('closeDialog',false)
   			})
		},
		getModelByRoleId(){
			var _self = this;
			var userId = sessionStorage.getItem("userId");
    		var token = sessionStorage.getItem("token");
	        axios({
	          method:'post',
	          url:'/sysRole/selectByRoleId',
	          data:qs.stringify({ token:token,userId: userId,roleId: _self.id})
	        }).then((res) => {
	        	var status = res.data.status;
	        	if(status === 200){
	        		  var ids = res.data.data;
			          ids.forEach(function(id){
			          	_self.checkedKeys.push(id.modelId)
			          })
	        	}
	        })
		},
		
       },
    mounted() {
		this.getModelByRoleId();
		this.getAuthList();
	}
  };
</script>

<style>
.roleDeploy{
	padding:30px 130px;
}
.btn{
	margin-top: 50px;
	text-align: center;
}

</style>